<template>
  <div class="stats">
    <h2>Todo Statistics</h2>
    <div class="stats-container">
      <div class="stat-item">
        <h3>全部事件</h3>
        <p>{{ stats.total }}</p>
      </div>
      <div class="stat-item">
        <h3>待办事件</h3>
        <p>{{ stats.active }}</p>
      </div>
      <div class="stat-item">
        <h3>已完成事件</h3>
        <p>{{ stats.completed }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia' //从Pinia的stats计算属性获取数据
import { useTodoStore } from '../stores/todo'

const store = useTodoStore()
const { stats } = storeToRefs(store)
</script>

<style scoped>
.stats {
  max-width: 600px;
  margin: 0 auto;
}

.stats-container {
  display: flex;
  justify-content: space-around;
  margin-top: 2rem;
}

.stat-item {
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  min-width: 100px;
}

.stat-item h3 {
  margin-top: 0;
  color: #42b983;
}
</style>